// 原子类
@import "@/common/design/var/index.scss";
@import "./box.scss";
@import "./paragraph.scss";
@import "./position.scss";
@import "./text.scss";
@import "./transform.scss";

// 字体大小
// 定义字体(px)单位，小于20都为px单位字体
@for $i from 9 to 20 {
  .text-#{$i} {
    font-size: $i + px;
  }

  .i-text-#{$i} {
    font-size: $i + px !important;
  }
}

// 定义字体(rpx)单位，大于或等于20的都为rpx单位字体
@for $i from 20 through 120 {
  .text-#{$i} {
    font-size: $i + rpx;
  }

  .i-text-#{$i} {
    font-size: $i + rpx !important;
  }
}

/* S 字体颜色*/
$text-colors-values: map-merge(
  $theme-colors,
  (
    "main": $text-color-main,
    "body": $text-color-body,
    "secondary": $text-color-secondary,
    "light": $text-color-light,
    "err": $text-color-err,
  )
);

@each $k, $v in $text-colors-values {
  .text-#{$k} {
    color: $v;
  }

  .i-text-#{$k} {
    color: $v !important;
  }
}
/* E 字体颜色*/

// 内外边距
/* #ifndef APP-NVUE */
$margin-values: (
  auto: auto,
  p30: 30%,
);
@each $k, $v in $margin-values {
  .m-#{$k} {
    margin: $v;
  }

  .mx-#{$k} {
    margin-left: $v;
    margin-right: $v;
  }

  .my-#{$k} {
    margin-top: $v;
    margin-bottom: $v;
  }

  .mt-#{$k} {
    margin-top: $v;
  }

  .mr-#{$k} {
    margin-right: $v;
  }

  .mb-#{$k} {
    margin-bottom: $v;
  }

  .ml-#{$k} {
    margin-left: $v;
  }
}
/* #endif */

@for $i from 0 through 120 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    .mx-#{$i} {
      margin-left: $i + rpx;
      margin-right: $i + rpx;
    }

    .i-mx-#{$i} {
      margin-left: $i + rpx !important;
      margin-right: $i + rpx !important;
    }

    .my-#{$i} {
      margin-top: $i + rpx;
      margin-bottom: $i + rpx;
    }

    .i-my-#{$i} {
      margin-top: $i + rpx !important;
      margin-bottom: $i + rpx !important;
    }

    .px-#{$i} {
      padding-left: $i + rpx;
      padding-right: $i + rpx;
    }

    .i-px-#{$i} {
      padding-left: $i + rpx !important;
      padding-right: $i + rpx !important;
    }

    .py-#{$i} {
      padding-top: $i + rpx;
      padding-bottom: $i + rpx;
    }

    .i-py-#{$i} {
      padding-top: $i + rpx !important;
      padding-bottom: $i + rpx !important;
    }

    /* #ifndef APP-NVUE  */
    .\!py-#{$i} {
      padding-top: $i + rpx !important;
      padding-bottom: $i + rpx !important;
    }
    /* #endif */

    .m-#{$i} {
      margin: $i + rpx;
    }
    .i-m-#{$i} {
      margin: $i + rpx !important;
    }

    .p-#{$i} {
      padding: $i + rpx;
    }

    .i-p-#{$i} {
      padding: $i + rpx !important;
    }

    @each $short, $long in l left, t top, r right, b bottom {
      .m#{$short}-#{$i} {
        margin-#{$long}: $i + rpx;
      }

      .m#{$short}-n#{$i} {
        margin-#{$long}: -$i + rpx;
      }

      .i-m#{$short}-#{$i} {
        margin-#{$long}: $i + rpx !important;
      }

      // 定义内边距
      .p#{$short}-#{$i} {
        padding-#{$long}: $i + rpx;
      }
      .i-p#{$short}-#{$i} {
        padding-#{$long}: $i + rpx !important;
      }
    }
  }
}

/* S 行高 */
.leading-0 {
  line-height: 0rpx;
}

@for $i from 20 through 120 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    .leading-#{$i} {
      line-height: $i + rpx;
    }

    .i-leading-#{$i} {
      line-height: $i + rpx !important;
    }
  }
}
/* E 行高 */

// 圆角
$rounded-values: (
  none: 0,
  full: 9999rpx,
  circle: 50%,
);
@each $k, $v in $rounded-values {
  .rounded-#{$k} {
    border-radius: $v;
  }

  .i-rounded-#{$k} {
    border-radius: $v !important;
  }
}

@for $i from 0 through 60 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
    .rounded-#{$i} {
      border-radius: $i + rpx;
    }

    .i-rounded-#{$i} {
      border-radius: $i + rpx !important;
    }

    .rounded-t-#{$i} {
      border-top-left-radius: $i + rpx;
      border-top-right-radius: $i + rpx;
    }

    .i-rounded-t-#{$i} {
      border-top-left-radius: $i + rpx !important;
      border-top-right-radius: $i + rpx !important;
    }

    .rounded-tl-#{$i} {
      border-top-left-radius: $i + rpx;
    }

    .i-rounded-tl-#{$i} {
      border-top-left-radius: $i + rpx !important;
    }

    .rounded-tr-#{$i} {
      border-top-right-radius: $i + rpx;
    }

    .i-rounded-tr-#{$i} {
      border-top-right-radius: $i + rpx !important;
    }

    .rounded-b-#{$i} {
      border-bottom-left-radius: $i + rpx;
      border-bottom-right-radius: $i + rpx;
    }

    .i-rounded-b-#{$i} {
      border-bottom-left-radius: $i + rpx !important;
      border-bottom-right-radius: $i + rpx !important;
    }

    .rounded-bl-#{$i} {
      border-bottom-left-radius: $i + rpx;
    }

    .i-rounded-bl-#{$i} {
      border-bottom-left-radius: $i + rpx !important;
    }

    .rounded-br-#{$i} {
      border-bottom-right-radius: $i + rpx;
    }

    .i-rounded-br-#{$i} {
      border-bottom-right-radius: $i + rpx !important;
    }
  }
}

// 文本溢出
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  /* #ifndef APP-NVUE */
  white-space: nowrap;
  /* #endif */
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-clip {
  text-overflow: clip;
}

/* start--Retina 屏幕下的 1px 边框--start */
// .border,
// .border-bottom,
// .border-left,
// .border-right,
// .border-top,
// .border-top-bottom {
//   position: relative;
// }

// .border-bottom:after,
// .border-left:after,
// .border-right:after,
// .border-top-bottom:after,
// .border-top:after,
// .border:after {
//   /* #ifndef APP-NVUE */
//   content: " ";
//   /* #endif */
//   position: absolute;
//   left: 0;
//   top: 0;
//   pointer-events: none;
//   box-sizing: border-box;
//   -webkit-transform-origin: 0 0;
//   transform-origin: 0 0;
//   // 多加0.1%，能解决有时候边框缺失的问题
//   width: 199.8%;
//   height: 199.7%;
//   transform: scale(0.5, 0.5);
//   border: 0 solid $border-color;
//   z-index: 2;
// }

// .border-top:after {
//   border-top-width: 1px;
// }

// .border-left:after {
//   border-left-width: 1px;
// }

// .border-right:after {
//   border-right-width: 1px;
// }

// .border-bottom:after {
//   border-bottom-width: 1px;
// }

// .border-top-bottom:after {
//   border-width: 1px 0;
// }

// .border:after {
//   border-width: 1px;
// }
/* end--Retina 屏幕下的 1px 边框--end */

/* display 布局 start */
/* #ifndef APP-NVUE */
$display-values: (
  inline: inline,
  inline-block: inline-block,
  block: block,
  grid: grid,
  table: table,
  table-row: table-row,
  table-cell: table-cell,
  inline-flex: inline-flex,
  none: none,
);
@each $k, $v in $display-values {
  .#{$k} {
    display: $v;
  }

  .i-#{$k} {
    display: $v !important;
  }
}
/* #endif */

.flex {
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  flex-direction: row !important;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex-direction: row;
  /* #endif */
}

// 主轴布局
$justify-values: (
  start: flex-start,
  center: center,
  end: flex-end,
  between: space-between,
);
@each $k, $v in $justify-values {
  .justify-#{$k} {
    justify-content: $v !important;
  }
}
// 主轴方向

$flex-direction-values: (
  row: row,
  row-reverse: row-reverse,
  col: column,
  col-reverse: column-reverse,
);
@each $k, $v in $flex-direction-values {
  .flex-#{$k} {
    flex-direction: $v !important;
  }
}

// 辅轴布局
$align-values: (
  start: flex-start,
  center: center,
  end: flex-end,
);
@each $k, $v in $align-values {
  .items-#{$k} {
    align-items: $v !important;
  }
}
// 占位
@for $i from 1 through 5 {
  .flex-#{$i} {
    flex: $i !important;
  }
}
// 间距
/* #ifndef APP-NVUE */
$gap-values: (
  6: 6rpx,
  16: 16rpx,
  18: 18rpx,
  22: 22rpx,
  24: 24rpx,
  28: 28rpx,
  30: 30rpx,
  32: 32rpx,
  40: 40rpx,
  48: 48rpx,
  50: 50rpx,
  64: 64rpx,
  72: 72rpx,
  90: 90rpx,
);
@each $k, $v in $gap-values {
  .gap-#{$k} {
    gap: $v;
  }
  .gap-row-#{$k} {
    row-gap: $v;
  }

  .gap-col-#{$k} {
    column-gap: $v;
  }
}
/* #endif */

// 换行
$wrap-values: (wrap, wrap-reverse, nowrap);
@each $v in $wrap-values {
  .flex-#{$v} {
    flex-wrap: $v;
  }
}
// .gui-rows {
// flex-direction: row;
// }
// .gui-columns {
// flex-direction: column;
// }
// .gui-wrap {
// flex-direction: row;
// flex-wrap: wrap; // }
// .gui-nowrap {
// flex-direction: row;
// flex-wrap: nowrap;
// }
// .gui-space-around {
// justify-content: space-around;
// }
// .gui-space-between {
// justify-content: space-between;
// }
// .gui-justify-content-start {
// justify-content: flex-start;
// }
// .gui-justify-content-center {
// justify-content: center;
// }
// .gui-justify-content-end {
// justify-content: flex-end;
// }
// .gui-align-items-start {
// align-items: flex-start;
// }
// .gui-align-items-center {
// align-items: center;
// }
// .gui-align-items-end {
// align-items: flex-end;
// }
/* display 布局 end */
/* S 字体大小 */
$font-size-values: (
  smallest: $font-size-smallest,
  small: $font-size-small,
  content: $font-size-content,
  label: $font-size-label,
  title: $font-size-title,
  title-large: $font-size-title-large,
  title-bigger: $font-size-title-bigger,
);
@each $k, $v in $font-size-values {
  .text-#{$k} {
    font-size: $v;
  }
}
/* E 字体风格 */

/* S 透明度 */
$opacity-values: (
  0: 0,
  33: 0.3,
  10: 0.1,
  20: 0.2,
  30: 0.3,
  40: 0.4,
  60: 0.6,
  80: 0.8,
  100: 1
);
@each $k, $v in $opacity-values {
  .opacity-#{$k} {
    opacity: $v;
  }
}
/* E 透明度 */

/* S 显示隐藏 */
/* #ifndef APP-NVUE */

$visibility-values: (
  visible: visible,
  invisible: hidden
);
@each $k, $v in $visibility-values {
  .#{$k} {
    visibility: $v;
  }
}
/* #endif */
/* E 显示隐藏 */

/* S 高度 */
.h-full {
  /* #ifndef APP-NVUE */
  height: 100%; /* #endif */
  /* #ifdef APP-NVUE */
  flex: 1; /* #endif */
}
.h-auto {
  /* #ifndef APP-NVUE */
  height: auto;
  /* #endif */
}

// 最小高
$min-height-values: ();
@each $k, $v in $min-height-values {
  .min-h-#{$k} {
    min-height: $v;
  }
}

$height-Values: (
  64: 64rpx,
  56: 56rpx,
  48: 48rpx,
);
@each $k, $v in $height-Values {
  .h-#{$k} {
    height: $v;
  }
}
/* E 高度 */
/* S 宽度 */
.w-full {
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
}
.w-0 {
  /* #ifndef APP-NVUE */
  width: 0;
  /* #endif */
}

$width-Values: (
  40: 40rpx,
  50: 50rpx,
  64: 64rpx,
);
@each $k, $v in $width-Values {
  .w-#{$k} {
    width: $v;
  }
}

/* #ifndef APP-NVUE */
// 最小宽
$min-width-values: (
  40: 40rpx,
  content: max-content
);
@each $k, $v in $min-width-values {
  .min-w-#{$k} {
    min-width: $v;
  }
}

// 最大宽
$max-width-values: (
  40: 40rpx,
  content: max-content,
);
@each $k, $v in $max-width-values {
  .max-w-#{$k} {
    max-width: $v;
  }
}


$width-Values: (
  auto: auto,
  content: max-content,
);
@each $k, $v in $width-Values {
  .w-#{$k} {
    width: $v;
  }
}
/* #endif */
/* E 宽度 */

/* S 过渡 */
$transition-values: (
  bg-color: background-color,
  color: color,
  opacity: opacity,
  transform: transform,
  width: width,
  height: height,
);
@each $k, $v in $transition-values {
  .transition-#{$k} {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-property: $v;
  }
}

/* #ifndef APP-NVUE */
$transition-other-values: (
  all: all,
  none: none,
  shadow: box-shadow,
  size: "width, height",
  position: "top, right, bottom, left",
);
@each $k, $v in $transition-other-values {
  .transition-#{$k} {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    transition-property: $v;
  }
}
/* #endif */
/* E 过渡 */

/* S 平移 */
$translate-values: (
  full: 100%,
);
@each $k, $v in $translate-values {
  .translate {
    &-#{$k} {
      transform: translate($v, $v);
    }
    &-x-#{$k} {
      transform: translateX($v);
    }
    &-y-#{$k} {
      transform: translateY($v);
    } // 负
    &-#{$k}-n {
      transform: translate(-$v, -$v);
    }
    &-x-#{$k}-n {
      transform: translateX(-$v);
    }
    &-y-#{$k}-n {
      transform: translateY(-$v);
    }
  }
}
/* E 平移 */
